<template>
    <div class="main config-chatWindow">
        <div class="top clearfix">
            <div class="top-left fl">
                <span class="ads-setting">广告栏设置：</span>
                <div class="checklist">
                    <Checkbox v-model="config.chat.left.isShow">显示左侧广告栏</Checkbox>
                    <Checkbox v-model="config.chat.right.isShow">显示右侧广告栏</Checkbox>
                </div>
            </div>
            <div class="top-right fr">
                <span>设置主题颜色：</span>
                <ColorPicker 
                    class="colpicker" 
                    v-model="config.top.bgColor" 
                    @on-change = "colorChange"
                    size="small" />
            </div>
        </div>
        <div class="chat-window">
            <div class="chat-top flex-row" :style="{backgroundColor:config.top.bgColor}">
                <div class="logo" @click="logoSetting">
                    <img src="../../../../static/images/config-logo.png" alt="">
                </div>
                <div class="colpick flex-item"></div>
            </div>
            <div class="chat flex-row">
                <div class="chat-left" v-show="config.chat.left.isShow" @click="leftSetting">
                    <img src="../../../../static/images/config-leftads.jpg" alt="">
                </div>
                <div class="chat-mid flex-item">
                    <div class="chat-list" @click="chatSetting">
                        <p class="timetamp"><span class="time">15:27:22</span></p>
                        <div class="msg-box clearfix">
                            <p class="msg fl"><span>{{config.chat.middle.welcome}}</span></p>
                        </div>
                        <div class="msg-box clearfix">
                            <p class="msg fr">您好，我想咨询一下价格</p>
                        </div>
                        <div class="msg-box clearfix">
                            <p class="msg fl"><span>{{config.chat.middle.waiting}}</span></p>
                        </div>
                        <div class="msg-box clearfix">
                            <p class="msg fl"><span>{{config.chat.middle.busy}}</span></p>
                        </div>
                        <div class="msg-box clearfix">
                            <p class="msg fl">{{config.chat.middle.goodbye}}</p>
                        </div>
                        <div class="msg-box clearfix" v-show="timeout">
                            <p class="msg fl">您已长时间未响应客服对话，如果长时间未响应，对话将结束！</p>
                        </div>
                    </div>
                    <div class="chat-tools" @click="chatToolsSetting">
                        <ul class="btn-list clearfix">
                            <li class="item fl"><Icon type="chatbubble" size="20"></Icon></li>
                            <li class="item fl"><Icon type="chatbubble-working" size="20"></Icon></li>
                            <li class="item fl"><Icon type="headphone" size="20"></Icon></li>
                            <li class="item fl"><Icon type="outlet" size="20"></Icon></li>
                            <li class="item fl"><Icon type="image" size="20"></Icon></li>
                            <li class="item fl"><Icon type="wifi" size="20"></Icon></li>
                            <li class="item fl"><Icon type="person" size="20"></Icon></li>
                        </ul>
                    </div>
                    <div class="text-area">
                        <textarea readonly></textarea>
                    </div>
                    <div class="chat-end">
                        <button class="btn">发送<Icon class="icon" type="arrow-down-b"></Icon></button>
                        <button class="btn">结束对话</button>
                    </div>
                </div>
                <div class="chat-right" v-show="config.chat.right.isShow" @click="rightSetting">
                    <img src="../../../../static/images/config-rightads.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="setting">
            <p>访客超时提示</p>
            <Checkbox v-model="timeout">开启访客超时提示</Checkbox>
            <Button>编辑提示内容</Button>
        </div>
        <div class="saveSetting">
            <Button class="fr" type="primary">保存配置</Button>
        </div>
        <!-- <modal 
            class="modal"
            name="config-top">
            <p class="title">设置企业标志</p>
            <Form :model="topFormItem" :label-width="80">
                <FormItem label="Input">
                    <Input v-model="topFormItem.input" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem>
                    <Button type="ghost">重置</Button>
                    <Button type="primary" @click="closeModal('config-top')">确定</Button>
                </FormItem>
            </Form>
        </modal> -->
        <Modal
            v-model="modal1"
            title="Common Modal dialog box title"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form :model="topFormItem" :label-width="80">
                <FormItem label="Input">
                    <Input v-model="topFormItem.input" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem>
                    <!-- <Upload
                
                        :headers = uploadHeader
                        :before-upload="handleUpload"
                        action="/a">
                        <Button type="ghost" icon="ios-cloud-upload-outline">Select the file to upload</Button>
                    </Upload>
                    <div v-if="file !== null">
                        Upload file: {{ file.name }} 
                        <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? 'Uploading' : 'Click to upload' }}</Button>
                    </div> -->
                     <Upload  :headers = uploadHeader :action="uploadFileUrl">
        <Button type="ghost" icon="ios-cloud-upload-outline">Upload files</Button>
    </Upload>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import * as API from '@/api/client'
export default {
    data () {
        return {
            chatExamples: [],
            timeout: false,
            config: {
                "top": {
                    "logo": "http://xxx/logo.png",
                    "href": '',//图片跳转链接
                    "bgColor": "#8bb6e9"
                },
                "chat": {
                    "left": {
                        "isShow": true,//是否显示左侧广告栏
                        "imgUrl": "http://xxx/leftAds.png",//左侧广告图片
                        "href": "" //图片跳转链接
                    },
                    "right": {
                        "isShow": true,//是否显示右侧广告栏
                        "imgUrl": "",//右侧广告图片
                        "href": ""//图片跳转链接
                    },
                    "middle": {
                        "lang": "zh-cn",//当前语言
                        "welcome": "为您服务， 请问有什么可以帮到您?为方便您的预订，欢迎致电客服热线400-080-0086",//欢迎语
                        "waiting": "您好! 欢迎光临我要去香港旅游网，请稍候......",//等候提示
                        "busy": "您好! 欢迎光临我要去香港旅游网，现在客服人员正忙，请稍后......",//繁忙提示
                        "goodbye": "谢谢您的光临，欢迎下次惠顾!",//结束语
                        "operations": [//聊天工具栏操作
                            {"name":"emoji", "isShow": true},//表情
                            {"name":"chatHistory", "isShow": true},//保存聊天记录
                            {"name":"applyQQ", "isShow": true},//添加QQ
                            {"name":"callback", "isShow": true},//电话回拨
                            {"name":"file", "isShow": true},//传送文件
                            {"name":"lang", "isShow": true},//多语言
                        ],
                        "satisfaction": [
                            {"name":"model1","isShow": true},//开启满意度评价
                            {"name":"model2","isShow": true},//工具栏和对话过程中提示满意度评价
                        ]
                    }
                }
            },
            topFormItem: {
                input: ''
            },
            modal1: false,
            loadingStatus: false,
            file: null,
            uploadHeader: {
                "dfs_app_token": "5caaf9f0-9a8a-437d-a3f4-684b3f82d062",
                "dfs_app": "test_app",
                "dfs_group_id": "21"
            }
        }
    },
    computed:{
uploadFileUrl(){
    return API.uploadFile();
}
    },
    methods: {
        handleUpload (file) {
            this.file = file;
            return false;
        },
        upload () {
            this.loadingStatus = true;

        },
        cancel () {

        },
        ok () {

        },
        closeModal (name) {
            this.$modal.hide(name);
        },
        logoSetting () {
            this.modal1 = true;
            console.log('logoSetting');
            this.$modal.show('config-top');
        },
        leftSetting () {
            console.log('leftSetting');
        },
        rightSetting () {
            console.log('rightSetting');
        },
        chatSetting () {
            console.log('chatSetting');
        },
        chatToolsSetting () {
            console.log('chatToolsSetting');
        },
        colorChange () {

        }
    },
    mounted () {
        this.$store.dispatch("getChatConfig");
    }

}
</script>
<style lang="scss" scoped>
    .main {
        margin: 0 auto;
        width: 858px;

        .top {
            height: 30px;
            line-height: 30px;

            .ads-setting, .checklist {
                display: inline-block;
            }
        }

        .chat-window {
            padding-top: 40px;
            position: relative;

            .chat-top {
                height: 40px;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                background-color: $c_37;

                .logo {
                    width: 180px;
                    height: 40px;
                    overflow: hidden;
                    position: relative;

                    &:hover::after {
                        content: "点击进入编辑";
                        height: 40px;
                        line-height: 40px;
                        @extend .content-after;
                    }
                    
                }

                .colpick {
                    position: relative;
                }

            }

            .chat {
                width: 100%;
                height: 572px;
                background: #ccc;

                .chat-left {
                    width: 180px;
                    height: 100%;
                    overflow: hidden;
                    position: relative;

                    &:hover::after {
                        content: "点击进入编辑";
                        height: 572px;
                        line-height: 572px;
                        @extend .content-after;
                    }
                }

                .chat-mid {
                    position: relative;

                    .chat-list {
                        padding: 10px 32px 0 32px;
                        height: 409px;  
                        background: $c_1;
                        
                        &:hover::after {
                            content: "点击进入编辑";
                            height: 409px;
                            line-height: 409px;
                            position: relative;
                            z-index: 2;
                            @extend .content-after;
                        }
                        .timetamp {
                            width: 100%;
                            height: 20px;
                            text-align: center;
                            margin-bottom: 8px;

                            .time {
                                width: 65px;
                                border-radius: 6px;
                                background-color: $c_43;
                                color: $c_44;
                                padding:0px 6px;
                            }

                        }
                        .msg-box {
                            // width: 100%;
                            
                            .msg {
                                line-height: 20px;
                                border: solid 1px $c_41;
                                border-radius: 6px;
                                background-color: $c_42;
                                padding:8px;
                                margin-bottom: 6px;
                                position: relative;

                                &.fl::after {
                                    position: absolute;
                                    height: 0;
                                    width: 0;
                                    display: block;
                                    content: "";
                                    border-top: 8px solid transparent;
                                    border-bottom: 12px solid transparent; 
                                    border-right: 12px solid $c_42; 
                                    left: -12px;
                                    top: 50%;
                                    margin-top: -10px;
                                    z-index: 1;
                                }

                                &.fl::before {
                                    position: absolute;
                                    height: 0;
                                    width: 0;
                                    display: block;
                                    content: "";
                                    border-top: 8px solid transparent;
                                    border-bottom: 12px solid transparent; 
                                    border-right: 12px solid $c_41; 
                                    left: -13px;
                                    top: 50%;
                                    margin-top: -10px;
                                    z-index: 1;
                                }

                                &.fr::after {
                                    position: absolute;
                                    height: 0;
                                    width: 0;
                                    display: block;
                                    content: "";
                                    border-top: 8px solid transparent;
                                    border-bottom: 12px solid transparent; 
                                    border-left: 12px solid $c_42;
                                    right: -12px;
                                    top: 50%;
                                    margin-top: -10px;
                                    z-index: 1;
                                }

                                 &.fr::before {
                                    position: absolute;
                                    height: 0;
                                    width: 0;
                                    display: block;
                                    content: "";
                                    border-top: 8px solid transparent;
                                    border-bottom: 12px solid transparent; 
                                    border-left: 12px solid $c_41;
                                    right: -13px;
                                    top: 50%;
                                    margin-top: -10px;
                                    z-index: 1;
                                 }



                            }

                        }
                    }

                    .chat-tools {
                        border-top: solid 1px $c_39;
                        height: 32px;
                        position: relative;
                        background-color: $c_40;
                        padding-left: 20px;

                        &:hover::after {
                            content: "点击进入编辑";
                            height: 32px;
                            line-height: 32px;
                            @extend .content-after;
                        }

                        .btn-list {

                            .item {
                                line-height: 32px;
                                margin-right: 16px;
                            }
                        }

                    }

                    .text-area {
                        width: 100%;
                        height: 90px;
                        // border: solid 1px $c_39;

                        textarea {
                            width: 100%;
                            height: 100%;
                            resize: none;
                        }
                    }

                    .chat-end {
                        height: 41px;
                        border-bottom: solid 1px $c_39;
                        background-color: $c_40;
                        padding-right: 10px;

                        .btn {
                            width: 55px;
                            height: 24px;
                            border: solid 1px $c_39;
                            background-color: $c_40;
                            float: right ;
                            margin-left: 15px;
                            margin-top: 6px;

                            .icon {
                                margin-left: 5px;
                            }
                        }
                    }
                }

                .chat-right {
                    width: 270px;
                    height: 100%;
                    overflow: hidden;
                    position: relative;

                    &:hover::after {
                        content: "点击进入编辑";
                        height: 572px;
                        line-height: 572px;
                        @extend .content-after;
                    }
                }


            }


        }
    }
    .content-after {
        background-color: $c_38;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        text-align: center;
        cursor: pointer;
    }
</style>


